<template>
  <el-select 
    ref="selectRef"
    v-model="selectValue" 
    :multiple="multiple" 
    :placeholder="placeholder" 
    :style="{width:width}" 
    clearable
    :filterable="filterable"
    :remote="remote"
    popper-class="select_delete_box"
  >
    <template #suffix>
      <div class="custom-arrow-icon"></div>
    </template>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <div class="option-content">
        <span class="option-label">{{ item.label }}</span>
        <el-button 
          class="delete-btn" 
          type="danger" 
          :icon="Delete"
          circle
          size="small"
          @click.stop="handleDelete(item)"
        ></el-button>
      </div>
    </el-option>
  </el-select>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'MSelectDelete',
})
</script>

<script setup lang="ts">
import { defineModel, defineProps, defineEmits } from 'vue'
import { Delete } from '@element-plus/icons-vue'

interface Data {
  label: string,
  value: number | string
}

const emit = defineEmits(['delete'])
const selectValue: any = defineModel("value")

const props = defineProps({
  options: {
    type: Array<Data>,
    default: () => []
  },
  placeholder: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: ""
  },
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  remote: {
    type: Boolean,
    default: false
  }
})

// 处理删除事件
const handleDelete = (item: Data) => {
  emit('delete', item)
}
</script>

<style lang="scss" scoped>
@import '@/styles/select.scss';

.custom-arrow-icon {
  width: 16px;
  height: 16px;
  background: url("@/assets/imgs/home/triangle.png") center center no-repeat;
  background-size: contain;
}

// 隐藏原始下拉箭头
:deep(.el-input__suffix-inner .el-select__caret) {
  display: none !important;
}

// 科技感样式
.select_delete_box {
  background: rgba(0, 20, 40, 0.9) !important;
  border: 1px solid rgba(0, 180, 255, 0.5) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(0, 100, 180, 0.3) !important;
  
  .el-select-dropdown__item {
    background: transparent !important;
    color: #e0f0ff !important;
    transition: all 0.3s;
    
    &:hover, &.selected {
      background: rgba(0, 120, 215, 0.2) !important;
    }
  }
}

.option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  
  .option-label {
    color: #e0f0ff;
  }
  
  .delete-btn {
    padding: 4px;
    height: 24px;
    width: 24px;
    background: linear-gradient(to right, #5e0000, #bf0000);
    border: 1px solid rgba(255, 120, 120, 0.6);
    transition: all 0.3s;
    transform: scale(0.9);
    opacity: 0.7;
    
    &:hover {
      transform: scale(1);
      opacity: 1;
      box-shadow: 0 0 10px rgba(255, 50, 50, 0.6);
    }
    
    :deep(.el-icon) {
      font-size: 12px;
    }
  }
}

// 修改下拉框样式，增加科技感
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(0, 30, 60, 0.2);
  border: 1px solid rgba(0, 180, 255, 0.3);
  box-shadow: 0 0 5px rgba(0, 120, 215, 0.2);
  transition: all 0.3s;
  
  &:hover, &.is-focus {
    border-color: rgba(0, 180, 255, 0.8);
    box-shadow: 0 0 8px rgba(0, 180, 255, 0.4);
  }
  
  .el-input__inner {
    color: #e0f0ff;
  }
}
</style>
